<template>
    <div>
   <h1>显示页面</h1>
    </div>
    <h1>

 当前{{user.userinfo.name}}登录

    </h1>

    <table class="table">
        <thead>
            <tr>
                <td>等级</td>
                <td>地址</td>
                <td>数量</td>
                <td>手机号</td>
                <td>用户</td>
            </tr>
        </thead>
          <tbody>
            <tr v-for="o in data">
                <td>{{o.stuberName}}</td>
                <td>{{o.adds}}</td>
                <td>{{o.num}}</td>
                <td>{{o.phone}}</td>
                <td>{{o.userMagerName}}</td>
            </tr>
        </tbody>
    </table>

     一共{{panss.mumber}}条，每页显示{{panss.size}}条，共{{panss.count}}页，当前{{panss.index}}页
      <input type="button" value="首页" @click="pange(1)">
        <input type="button" value="上一页" @click="pange(2)">

        <input type="button" v-for="d in panss.mumber" @click="yye(d)">

          <input type="button" value="下一页" @click="pange(3)">
            <input type="button" value="尾页" @click="pange(4)">

 <input type="mumbe" style="width:40px;height:40px" v-model="panss.index"><input type="button" value="跳转" @click="si()">
           <select v-model="panss.size" @change="pann()">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
           </select>
</template>

<script setup lang="ts">
  import axios from 'axios';
    import {ref,onMounted} from 'vue';
import{useRouter} from 'vue-router';
import {useUserStore} from '@/stores/usermager';
 const user=useUserStore();

 const  router=useRouter(); 
  onMounted(()=>{
    Shpw();
  })
  const data=ref([{
        "stuberId": 1,
      "stuberName": "专业",
      "num": 12,
      "adds": "江西省",
      "phone": "15302120010",
      "userMagerId": 1,
      "userMagerName": "李泉"

  }])

    const pann=()=>{

    panss.value.index=1;

    Shpw();

    }


     const yye=(val:any)=>{

   panss.value.index=val;
       Shpw();
     }

   const si=()=>{
    if(panss.value.index<1||panss.value.index>panss.value.count){

    }else{
         panss.value.index=1;
    }
     Shpw();
   }

  const pange=(val:any)=>{
    if(val==1){
 panss.value.index=1;
 Shpw();
    }

    
     if(val==2&&panss.value.index<1){
 panss.value.index--;
 Shpw();
     }
          if(val==3&&panss.value.index<1||panss.value.mumber){
 panss.value.index++;
 Shpw();
     }

 if(val==4){
 panss.value.index=panss.value.mumber;

 Shpw();
     }


  }


 const panss=ref({
     index:1,
     size:2,
count:0,
mumber:0
 })

  

   const Shpw=()=>{
     axios.get("https://localhost:7103/api/Stuber/Shpw",{params:panss.value}).then(res=>{
           
            data.value=res.data.mumber;
             panss.value.count=res.data.count;
             panss.value.mumber=Math.ceil(panss.value.count/panss.value.size);

     })
   }
 
</script>

<style scoped>

</style>
